<template>
    <VRow>
        <VCol cols="12" md="2">
            <v-treeview
            :items="goodsGroupTree"
            color="primary"
            item-value="id"
            item-title="label"
            expand-icon="tabler-chevron-right"
            collapse-icon="tabler-chevron-down"
            @click:select="selectNode"
        ></v-treeview>
        </VCol>
        <VCol cols="12" md="10">
            <VDataTableServer :loading="tableLoading" v-model:items-per-page="queryParams.pageSize" v-model:model-value="selectedRows" v-model:page="queryParams.pageNum" v-model="selected" :items="data" item-value="id" :items-length="total" :headers="headers">
            <template v-slot:headers="{ allSelected, someSelected, selectAll }">
            </template>
            <template v-slot:body="{ items }">
                <v-empty-state v-if="!items.length"
                    icon="tabler-search"
                    headline="暂无数据"
                    title="这里还没有任何记录"
                ></v-empty-state>
                <v-responsive
                    class="overflow-y-hidden overflow-x-hidden"

                >
                <VRow>
                <VCol v-for="item in items">
                      <VCard
                      width="250"
                      height="250"
                      @click="goDetail(item)">
                        <v-lazy>
                          <VImg
                          aspect-ratio="1"
                          :src="item.image"
                          cover
                        />
                        </v-lazy>
                      </VCard>
                    
                    <v-tooltip :text="item.name">
                      <template v-slot:activator="{ props }">
                        <VCardTitle v-bind="props" style="text-overflow: ellipsis;overflow:hidden;width: 250px;">{{ item.name }}</VCardTitle>
                      </template>
                    </v-tooltip>
                </VCol>
                </VRow>
            </v-responsive>
            </template>
            <!-- pagination -->
            <template #bottom>
                <TablePagination v-model:page="queryParams.pageNum" v-model:items-per-page="queryParams.pageSize" :total-items="total" @update:page="getList" @update:items-per-page="getList" />
            </template>
            </VDataTableServer>
        </VCol>
    </VRow>
</template>

<script setup>
import pages1 from '@images/pages/1.png'
import * as Utils from "@/utils/index";
import { listGoods } from '@/api/mes/goods';

const { proxy } = getCurrentInstance();

const queryFormRef = ref()

const queryParams = ref({
  pageNum: 1,
  pageSize: 20,
  isAsc: 'desc',
  orderByColumn: 'createTime',
  groupId:undefined
});

async function loadElementImg(item, type) {
  Utils.loadElementImg(item, type)
}

const handleReset = () => {
  // dateTimePicker.value.onClear()
  handleSearch()
}


const handleSearch = () => {
  queryParams.value.pageNum = 1;
  getList();
}



// Data table options
const total = ref(0);
const data = ref([]);
const tableLoading = ref(false);
// Headers
const headers = [
  {
    title: "素材商品",
    key: "galleryInfo",
    sortable: false,
  }
];

const selected = ref()

const goodsGroupTree = ref([])

Utils.getGoodsGroupTree().then(res=>{
    goodsGroupTree.value = res.data
})

const selectNode = ({id, value, path})=>{
  console.log(selected,id)
  if (queryParams.value.groupId == id) {
    handleReset()
    queryParams.value.groupId = undefined
    data.value = []
    return
  }
  queryParams.value.groupId = id
  getList()
}

function getList() {
  tableLoading.value = true;
  listGoods(queryParams.value).then((res) => {
    data.value = res.rows;
    total.value = res.total;
    tableLoading.value = false;
  });
}
getList();

</script>